<template>
  <div>
    <div class="link-input-container">
      <el-input
        v-model="computedValue"
        :style="widthStyle"
        :placeholder="element.options.placeholder"
        :disabled="element.options.disabled"
        :maxlength="element.options.maxlength"
        type="text"
        class="defaultWidth link-input"
        size="small"
        @focus="getFocus"
        @input="changeInput"
        @change="numberInputChange"
      />
      <!-- <div v-if="isWeiboOrWeixin && isWeixinLink" class="get-content" @click="getWeixin">获取内容</div> -->
    </div>

    <div :class="{'table': isTable}" class="link-name">
      <div class="label"><i class="el-icon-edit"/>文本：</div>
      <el-input
        v-model="element.options.defaultLinkName"
        :style="widthStyle"
        :maxlength="50"
        placeholder="请输入链接文本"
        type="text"
        class="link-name-input"
        size="small"
      />
    </div>
  </div>
</template>
<script>
import { getWeixinContent } from '@/api/extensions';
export default {
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  inject: {
    fillContent: { default: null }
  },
  props: {
    value: {
      type: String,
      default: null
    },
    widthStyle: {
      type: Object,
      default: () => ({})
    },
    element: {
      type: Object,
      default: () => ({})
    },
    isTable: {
      type: Boolean,
      default: false
    },
    isWeiboOrWeixin: { // 是否双微发文审核
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },
  computed: {
    computedValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('changeValue', val);
      }
    },
    isWeixinLink() {
      return this.computedValue.includes('mp.weixin');
    }
  },
  methods: {
    changeInput(event) {
      this.$emit('changeInput', event);
    },
    numberInputChange() {
      this.$emit('numberInputChange');
    },
    getFocus() {
      this.$emit('getFocus');
    },
    async getWeixin() {
      try {
        const res = await getWeixinContent();
        if (res.code === 200) {
          const htmlString = res.data;
          const parser = new DOMParser();
          const doc = parser.parseFromString(htmlString, 'text/html');
          const scripts = doc.getElementsByTagName('script');
          if (scripts) {
            Array.from(scripts).forEach((item) => {
              if (item.textContent && item.textContent.includes('videoPageInfos')) {
                // eslint-disable-next-line no-eval
                console.log(item.textContent, eval(item.textContent));
              }
            });
          }
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.link-input {
  height: 32px !important;
  &::v-deep {
    .el-input__inner {
      height: 100% !important;
    }
  }
}
.link-name {
  display: flex;
  align-items: center;
  .label {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    color: #999;
    font-size: 12px;
    line-height: 31px;
    i {
      line-height: 31px;
      margin-right: 3px;
    }
  }
  .link-name-input {
    height: 32px !important;
    width: 0;
    flex: 1;
    display: flex;
    &::v-deep {
      .el-input__inner {
        background-color: transparent;
        border: none;
        height: 100% !important;
        padding: 0;
        font-size: 12px;
      }
    }
  }
  &.table  {
    padding: 0 8px;
  }
}
.defaultWidth {
  width: 100%;
  max-width: 100%;
  &::v-deep {
    .el-input__inner {
      max-width: 100%;
      width: 100%;
    }
  }
}
.link-input-container {
  position: relative;
  .get-content {
    position: absolute;
    right: -52px;
    top: 0;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #406eff;
    cursor: pointer;
  }
}
</style>
